<template>
	<div class="game-container report-container editPicturePage">
		<div class="editPicturePage-content">
			<div class="form-header">
				<span>{{ $t('agent.basic_info') }}</span>
				<span>
					<el-button type="info" @click="back">
						{{ $t('common.back') }}
					</el-button>
				</span>
			</div>
			<div class="topform-wrapper">
				<el-form class="top-form" label-width="auto">
					<el-form-item
						:label="$t('agent.agent_account') + ':'"
						prop="activityName"
					>
						<el-input
							:value="detailData.signProxyName || '-'"
							disabled
							style="width: 80%"
						></el-input>
					</el-form-item>

					<el-form-item
						:label="$t('agent.agent_level') + ':'"
						prop="activityName"
					>
						<el-input
							:value="detailData.signProxyLevel"
							disabled
							style="width: 80%"
						></el-input>
					</el-form-item>

					<el-form-item
						:label="$t('common.top_agent') + ':'"
						prop="activityName"
					>
						<el-input
							:value="
								detailData.signProxyLevel === 0
									? $t('agent.current_sign_total_agent')
									: detailData.parentProxyName || '-'
							"
							disabled
							style="width: 80%"
						></el-input>
					</el-form-item>

					<el-form-item
						:label="$t('agent.contract_mode') + ':'"
						prop="activityName"
					>
						<el-input
							:value="contractTypeName || '-'"
							disabled
							style="width: 80%"
						></el-input>
					</el-form-item>

					<el-form-item
						:label="$t('agent.policy_type') + ':'"
						prop="policyType"
					>
						<el-input
							:value="detailData.policyType.policyType || '-'"
							disabled
							style="width: 80%"
						></el-input>
					</el-form-item>
				</el-form>
			</div>
			<div class="content">
				<el-table
					v-loading="loading"
					element-loading-spinner="el-icon-loading"
					border
					size="mini"
					:data="tableData"
					style="width: 100%"
					:header-cell-style="getRowClass"
					highlight-current-row
				>
					<el-table-column
						align="center"
						type="index"
						:label="$t('common.serial_number')"
					></el-table-column>
					<el-table-column
						align="center"
						:label="
							detailData.contractType === 1
								? `${$t('agent.rebate_rate')}(%)`
								: `${$t('agent.rebate_rate3')}(%)`
						"
						prop="rebateRate"
					>
						<template slot-scope="scope">
							{{ decimalToMul(scope.row.rebateRate) }}
						</template>
					</el-table-column>
					<el-table-column
						v-if="detailData.contractType === 1"
						align="center"
						:label="
							`${$t(
								'agent.agent_net_win_loss'
							)}(${currencySymbol})`
						"
						prop="netAmount"
					>
						<template slot-scope="scope">
							≥ {{ decimalToFixed2(scope.row.netAmount) }}
						</template>
					</el-table-column>
					<el-table-column
						v-if="detailData.contractType === 2"
						align="center"
						:label="`${$t('agent.game_trade')}(${currencySymbol})`"
						prop="validBetAmount"
					>
						<template slot-scope="scope">
							≥ {{ decimalToFixed2(scope.row.validBetAmount) }}
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						:label="
							detailData.contractType === 1
								? $t('agent.month_active_people_number') +
								  '(' +
								  $t('agent.people') +
								  ')'
								: $t('agent.active_people_number') +
								  '(' +
								  $t('agent.people') +
								  ')'
						"
						prop="activeUsers"
					>
						<template slot-scope="scope">
							≥ {{ getNumberValue(scope.row.activeUsers) }}
						</template>
					</el-table-column>
					<el-table-column
						v-if="detailData.contractType === 2"
						align="center"
						:label="
							$t('agent.active_people_new_add') +
								'(' +
								$t('agent.people') +
								')'
						"
						prop="effecactiveUsers"
					>
						<template slot-scope="scope">
							≥ {{ getNumberValue(scope.row.effecactiveUsers) }}
						</template>
					</el-table-column>
					<el-table-column
						v-if="detailData.contractType === 1"
						align="center"
						:label="
							$t('agent.month_active_people_new_add') +
								'(' +
								$t('agent.people') +
								')'
						"
						prop="monthAddActiveCount"
					>
						<template slot-scope="scope">
							≥
							{{ getNumberValue(scope.row.monthAddActiveCount) }}
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { mapGetters } from 'vuex'
export default {
	mixins: [list],
	props: {
		detailData: {
			type: Object,
			required: true
		}
	},
	data() {
		return {
			loading: false,
			tableData: []
		}
	},
	computed: {
		...mapGetters(['merchantList', 'merchantInfo']),
		currencySymbol() {
			const merchantId = this.detailData.merchantId
			const merchantInfo = this.merchantList.find(
				(item) => item.id === merchantId
			)
			return merchantInfo ? merchantInfo.currencySymbol : '¥'
		},
		// 契约模式
		contractTypeArr() {
			return [
				{ code: '1', description: this.$t('agent.commission') },
				{ code: '2', description: this.$t('agent.rebate') }
			]
		},

		contractTypeName() {
			const res = this.contractTypeArr.find(
				(item) => item.code === String(this.detailData.contractType)
			)
			return res?.description || '-'
		}
	},
	mounted() {
		this.loadScaleList()
	},
	methods: {
		back() {
			this.$emit('goback')
		},
		getRowClass({ row, column, rowIndex, columnIndex }) {
			if (rowIndex === 0) {
				return 'background:#EFEFEF'
			} else {
				return ''
			}
		},
		loadScaleList() {
			this.loading = true
			const params = {
				contractId: this.detailData.id,
				contractType: this.detailData.contractType,
				dataSourceType: 2,
				merchantId: this.detailData.merchantId
			}
			this.$api
				.getContractScaleListAPI(params)
				.then((res) => {
					this.tableData = res.data || []
					this.loading = false
				})
				.catch(() => (this.loading = false))
		}
	}
}
</script>

<style lang="scss" scoped>
.editPicturePage {
	background-color: #f5f5f5;
	margin: 0;
	padding: 15px 0 20px;
	.editPicturePage-content {
		width: 80%;
		margin: 0 auto;
		background-color: #fff;
		position: relative;
		.form-header {
			height: 55px;
			line-height: 55px;
			width: 100%;
			background-color: rgba(0, 0, 0, 1);
			span:nth-child(1) {
				position: absolute;
				left: 30px;
				top: 0;
				color: rgba(255, 255, 255, 0.847058823529412);
				font-size: 16px;
				font-weight: 700;
			}
			span:nth-child(2) {
				position: absolute;
				right: 30px;
				top: 0;
				color: #999;
				font-weight: 400;
				font-size: 14px;
			}
		}
		.form-header:after {
			content: '.';
			height: 0;
			display: table;
			clear: both;
		}
		.topform-wrapper {
			width: 100%;
			padding: 35px 0;
			margin-bottom: 30px;
			box-shadow: rgba(88, 88, 88, 0.35) 0px 0px 5px;
			.top-form {
				width: 50%;
				margin: 0 auto;
			}
		}
	}
}
</style>
